<template>
  <p
    data-type="naked_figure"
    contenteditable="false"
    :data-block-id="blockData.blockId"
    :data-id="blockData.figureData.dataId"
    :data-url="figureData.attributes.url"
    :data-width="width"
    :data-height="height"
  >
    <img :src="figureData.attributes.url" :width="width" :height="height" />
  </p>
</template>

<script>
export default {
  props: {
    blockData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  inject: ['pageType'],
  computed: {
    figureData() {
      return this.blockData.figureData
    },
    width() {
      return this.blockData.figureData.attributes.width || 30
    },
    height() {
      return this.blockData.figureData.attributes.height || 30
    }
  }
}
</script>
